<template>
	<view class="x-side-bar">
		
		<!-- 分享 -->
		<button class="btn" open-type="share">
			<image class="icon" :src="`${staticUrl}home/sidebar/share.png`"></image>
		</button>
		<button class="btn" open-type="contact">
			<image class="icon" :src="`${staticUrl}home/sidebar/service.png`"></image>
		</button>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import EventBusMacro from '@/plugins/EventBus/eventBusMacro.js'
	import {
		ThemeMixin
	} from '@/mixins/theme/xThemeMixin.js'
	

	export default {
		mixins: [ThemeMixin],
		computed: {
			...mapState(['userInfo']),
		},
		components: {
		},
		data() {
			return {
				imageUrl: this.$Config.imageUrl,
				staticUrl: this.$Config.staticUrl,
				curTimestamp: Date.now(), //当前时间戳
				showNewGift: false,
				activeNewGiftIndex: 0,
				// toNewGiftId: 0,
				newGifts: [],
			}
		},
		
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	.x-side-bar {
		.btn {
			margin-bottom: 20rpx;

			.icon {
				width: 84rpx;
				height: 84rpx;
				box-shadow: 0rpx 0rpx 10rpx rgba(0, 0, 0, 0.2);
				border-radius: 50%;
			}
		}


	}
</style>

<style lang="scss" scoped>
	.pop-new-gift {
		position: relative;
		width: 600rpx;

		.bg {
			width: 100%;
		}

		.frame {
			position: relative;
			left: 50%;
			-webkit-transform: translateX(-50%);
			transform: translateX(-50%);
			width: 520rpx;

			.header {
				width: 100%;
			}

			.content {
				background: linear-gradient(180deg, #F0CC8A, #F1E9D8);
				border-bottom-left-radius: 10rpx;
				border-bottom-right-radius: 10rpx;
				margin-top: -4rpx;

				.scroll-view {
					white-space: nowrap;
					overflow: hidden;
					height: 324rpx;
					padding-top: 8rpx;
					padding-bottom: 0rpx;

					.gift-item {
						width: calc(100% - 20rpx);
						margin: 10rpx;
						text-align: center;
						position: relative;

						.detail-coupon {
							display: flex;
							align-items: center;
							position: absolute;
							left: 40rpx;
							top: 0rpx;
							height: 100%;
							width: 100%;

							.price {
								display: flex;
								align-items: baseline;
								justify-content: center;
								color: #FF4E38;
								position: relative;
								top: 2%;

								.symbol {
									height: 36rpx;
									font-size: 30rpx;
									font-family: PingFang-SC-Bold, PingFang-SC;
									font-weight: bold;
									line-height: 36rpx;
								}

								.value {
									font-size: 75rpx;
									font-family: PingFang-SC-Bold, PingFang-SC;
									font-weight: bold;
									line-height: 45rpx;
								}
							}

							.right {
								margin-left: 10rpx;
								display: flex;
								flex-direction: column;
								align-items: flex-start;

								.name {
									font-size: 22rpx;
									color: #FF4E38;
									font-weight: 600;
								}

								.desc {
									margin-top: 6rpx;
									font-size: 22rpx;
									color: #999;
									font-weight: 600;
								}
							}
						}

						.detail-integral {
							position: absolute;
							left: 60rpx;
							top: 0rpx;
							display: flex;
							align-items: baseline;
							height: 100%;
							align-items: center;

							.amount {
								left: 40rpx;
								font-size: 75rpx;
								font-family: PingFang-SC-Bold, PingFang-SC;
								font-weight: bold;
								line-height: 45rpx;
								color: #FF4E38;
							}

							.static-text {
								font-size: 22rpx;
								color: #FF4E38;
								position: relative;
								top: 9%;
								margin-left: 8rpx;
								font-weight: 600;
							}
						}
					}
				}

				.btn-img {
					margin: 10rpx 55rpx 0rpx;
					width: calc(100% - 110rpx);
					padding-bottom: 10rpx;
				}
			}
		}



	}

	.close-icon {
		width: 100%;
		margin-top: 20rpx;
		display: flex;
		justify-content: center;
	}
</style>